<template>
  <a-row type="flex">
    <a-col flex="520px">
      <div class="pl-2 pr-2 radius-12 bg-fff flex align-center justify-between">
        <div class="flex align-center">
          <div class="color-primary">
            <span class="weight-600">步骤1</span>
            <span class="pl-1">AI 创作</span>
          </div>
          <div style="width: 40px;" class="ml-2 mr-2">
            <a-divider style="border-color: #A1A6B0" dashed />
          </div>
          <div class="color-2">
            <span class="weight-600">步骤2</span>
            <span class="pl-1">自定义调整</span>
          </div>
        </div>
        <div>
          <a-space :size="12">
            <a-button shape="round">上一步</a-button>
            <a-button shape="round" type="primary">下一步</a-button>
          </a-space>
        </div>
      </div>
      <div class="mt-1 bg-fff radius-12 p-2">
        <div class="bg-F5F5FA p-2 radius-12 flex align-center justify-between">
          <img src="@/assets/image/info.png" />
          <div>
            <div>没有灵感？让我辅助您进行设计吧</div>
            <div class="color-2 font-sm">可在一键生成后，修改灵感素材再次生成新的效果图</div>
          </div>
          <a-button shape="round" type="primary">一键生产</a-button>
        </div>
        <div class="mt-1 bg-fff radius-12 p-2 flex flex-column border">
          <div class="flex justify-between">
            <div class="flex align-center">
              <img class="icon-20" src="@/assets/image/photo.png" />
              <span class="pl weight-600">上传您期望的设计相关照片</span>
              <span class="color-3 font-sm">（可以是：汉服，山水，画）</span>
            </div>
            <a-button shape="round" size="small">全部清空</a-button>
          </div>
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader mt-2"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
            <div v-else>
              <loading-outlined v-if="loading"></loading-outlined>
              <img v-else class="icon-36" src="@/assets/image/upload.png" />
              <div class="ant-upload-text">点击上传</div>
            </div>
          </a-upload>
        </div>
        <div class="mt-1 bg-fff radius-12 p-2 flex flex-column border">
          <div class="flex justify-between">
            <div class="flex align-center">
              <img class="icon-20" src="@/assets/image/txt.png" />
              <span class="pl weight-600">输入您的意向文字描述</span>
            </div>
            <a-button shape="round" size="small">全部清空</a-button>
          </div>
          <div class="mt-2 flex align-center">
            <div class="mr-2">
              录入方式
            </div>
            <a-radio-group v-model:value="moduleType">
              <a-radio value="1">模板</a-radio>
              <a-radio value="2">自定义</a-radio>
            </a-radio-group>
          </div>
          <div class="mt-2">
            <a-form v-if="moduleType == '1'" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-item label="短袄">
                <a-input placeholder="可以输入「填充为白色」等提示文字" allowClear/>
              </a-form-item>
              <a-form-item label="马面裙">
                <a-input placeholder="可以输入「填充为白色」等提示文字" allowClear />
              </a-form-item>
              <a-form-item label="长襟">
                <a-input placeholder="可以输入「填充为白色」等提示文字" allowClear/>
              </a-form-item>            
            </a-form>
            <a-textarea  v-if="moduleType == '2'" :rows="5" showCount :maxlength="300" />
          </div>
        </div>
        <div class="mt-2 flex align-center">
          <div class="mr-2 pl-2">
            生成方式
          </div>
          <a-radio-group v-model:value="moduleType">
            <a-radio value="1">想要与图片素材类似</a-radio>
            <a-radio value="2">AI 自由发挥</a-radio>
          </a-radio-group>
        </div>
        <div class="mt-2 flex justify-center">
          <a-button shape="round" type="primary" class="w-180">
            生成效果图
          </a-button>
        </div>
      </div>
    </a-col>
    <a-col flex="auto" class="pl-1 flex flex-1 flex-column">
      <a-row type="flex" style="height: 640px;" class="pb-2">
        <a-col flex="auto" class="flex justify-center align-center">
          <img src="@/assets/image/modal.png" />
        </a-col>
        <a-col flex="320px">
          <div class="flex flex-column flex-1 p-2 radius-12 bg-fff">
            <div class="weight-600">色号</div>
            <div class="flex flex-1 flex-wrap">
              <div v-for="i in 3" class="color-item mt-1">
                <div class="color-block" style="background: #C78D2E"></div>
                <div>#C78D2E</div>
              </div>
            </div>
            <a-divider style="height: 1px; background-color: #E6EAEE" />
            <div class="weight-600">面料小样</div>
            <div class="flex flex-1 flex-wrap">
              <div v-for="i in 6" style="width: 20%" class="mt-1">
                <a-image
                  :width="44"
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                />
              </div>
            </div>
            <a-divider style="height: 1px; background-color: #E6EAEE" />
            <div class="flex align-center">
              <div class="weight-600">纹饰</div>
              <div class="color-3">（可以添加至素材库）</div>
            </div>
            <div class="flex flex-1 flex-wrap">
              <div v-for="i in 4" style="width: 33%" class="mt-1">
                <div class="pattern-card">
                  <a-image
                    :width="80"
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <div class="mask">
                    <div class="btn">
                      添加至<br/>素材库
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="flex flex-1 pl-2 pr-2 pt-1 pb-1 radius-12 bg-fff">
        <div class="flex align-center">
          <div class="flex flex-column align-center justify-center mr-2">
            <div class="flex align-center">
              <span>历史记录</span>
              <img class="icon-16 ml" src="@/assets/image/ask.png"/>
            </div>
            <div class="color-6">最多<span class="weight-600">5</span>个</div>
          </div>
          <a-divider type="vertical" style="height: 70px; background-color: #E6EAEE" />
          <div class="flex justify-center align-center pattern-card border radius-12 ml-2 border-primary">
            <img style="width: 70px" src="@/assets/image/1_2.png"/>
          </div>
          <div class="flex justify-center align-center pattern-card border radius-12 ml-2">
            <img style="width: 70px" src="@/assets/image/1_3.png"/>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts">
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
  import { useStore } from '@/store'
  import { getUser } from '@/utils/token'
  import image from '@/assets/image/1_1.png'

  export default defineComponent({
    name: 'Welcome',
    components: {
      SearchOutlined
    },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const checkIdx: any = ref(-1)
      const moduleType: any = ref('1')
      onMounted(() => {
      })

      const cancelHandle = () => {
        proxy.$router.go(-1)
      }

      const checkHandle = (idx) => {
        checkIdx.value = idx
        console.error(checkIdx.value)
      }

      return {
        moduleType,
        checkIdx,
        checkHandle,
        image: image,
        cancelHandle,
        labelCol: { span: 3 },
        wrapperCol: { span: 12 },
      }
    },
    computed: {
      columns() {
        return [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ]
      }
    }
  })
</script>

<style scoped lang="less">
  :deep(.ant-descriptions-small .ant-descriptions-row > th, .ant-descriptions-small .ant-descriptions-row > td) {
    margin-bottom: 0;
  }
  :deep(.ant-form-item) {
    margin-bottom: 16px;
  }
  :deep(.ant-form-item-label > label) {
    font-weight: normal;
  }
  .form-container {
    display: flex;
    justify-content: space-between;
  }

  .active {
    position: relative;
    border: 2px solid #4075E5;
  }
  .active::after {
    position: absolute;
    content: "";
    right: -2px;
    top: -2px;
    width: 36px;
    height: 36px;
    z-index: 99;
    background: url('@/assets/image/check.png');
    background-size: cover;
  }
  .cloth-img {
    width: 150px;
    height: 240px;
    background-image: url('../../assets/image/1_1.png');
    background-repeat:  no-repeat;
    background-position: center center;
    background-size: contain;
  }
  .color-item {
    display: flex;
    width: 50%;
    align-items: center;
  }
  .color-block {
    width: 44px;
    height: 44px;
    margin-right: 10px;
  }
  .pattern-card {
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid #E6EAEE;
    cursor: pointer;
  }
  .mask {
    display: none;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.3);
    .btn {
      width: 64px;
      height: 40px;
      line-height: 16px;
      border-radius: 30px;
      background: rgba(255,255,255,0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .pattern-card:hover .mask {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
